<script setup lang='ts'>
import { useGetMemberApply, useGetMemberInvoice } from '@fl/api/member-api/member'
import { DownLink } from '@fl/components'
import { ref, toRefs } from 'vue'

import Step from './step.vue'

const props = defineProps<{
    list: any
    total: number | string
}>()

const emits = defineEmits(['pageChange'])

const { push } = useRouter()

const { list, total } = toRefs(props)

const invoice = ref({
    bankAccount: '',
    bankName: '',
    invoiceTitle: '',
    invoicingAmount: '',
    registerAddr: '',
    registerPhone: '',
    taxNo: '',
})

const show = ref(false)
const state = {
    page: 1,
    size: 10,
}
const pages = ref({ ...state })

const params = ref<any>({})

const { mutate } = useGetMemberApply()
function doConfirm() {
    mutate(params.value, {
        onSuccess: () => {
            ElMessage.success('操作成功')
            show.value = false
        },
    })
}

const { mutate: mutateInfo } = useGetMemberInvoice()
function doApply(memberOrderId: any) {
    params.value.memberOrderId = memberOrderId
    mutateInfo({ memberOrderId }, {
        onSuccess: (res: any) => {
            invoice.value = { ...res }
            show.value = true
        },
    })
}

function resubmit(item: any) {
    push(`/member-add?orderType=1&memberOrderId=${item.id}`)
}

function handleSizeChange(val: any) {
    console.log('size', val)
    pageChange()
}
function handleCurrentChange(val: any) {
    console.log('page', val)
    pageChange()
}

function pageChange() {
    emits('pageChange', { ...pages.value })
}

function getType(status: any) {
    // 申请单状态 0 待财务审核 1 待运营审核 2运营审核通过 3财务审核不通过
    const arr = ['warning', 'warning', 'success', 'danger']
    return arr[status ?? 0]
}

function getInvoicing(status: any) {
    // 是否开票，1 是，0 否，2 已申请, 3 开票失败
    const arr = ['未开票', '已开票', '已申请', '开票失败']
    return arr[status ?? 0]
}

function getFiles(item: any) {
    return item.paymentVoucher.map((v: any) => {
        return {
            name: v?.receiptName ?? v,
            url: v?.paymentReceipt ?? v,
        }
    })
}
</script>

<template>
    <div class="box">
        <div v-for="(item, index) in list"
             :key="index"
             class="item"
        >
            <div class="mb-10 flex">
                <span class="text-16 font-600">{{ item.orderTypeName }}</span>

                <span class="ml-20">
                    <Step :data="item.getMemberOrderStatusProcessVOList" />
                </span>
            </div>

            <el-row v-if="item.status === 3"
                    class="py-5 mb-10 bg-#fef6f5 rounded-4"
            >
                <el-col :span="3"
                        class="min-w-160"
                >
                    <div class="pl-10 flex items-center">
                        <el-icon color="red">
                            <WarningFilled />
                        </el-icon>
                        &nbsp;&nbsp;审核不通过，原因：
                    </div>
                </el-col>

                <el-col :span="18">
                    {{ item.remark }}
                </el-col>

                <el-col :span="3"
                        class="text-right"
                >
                    <ElButton type="primary"
                              size="small"
                              @click="resubmit(item)"
                    >
                        重新提交
                    </ElButton>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="22"
                        class="c-#656d7f"
                >
                    <el-row>
                        <el-col :span="8">
                            <p>缴费金额：<span class="color-gray">{{ item.payAmount }}元</span></p>
                        </el-col>

                        <el-col :span="8">
                            <p>缴费日期：<span class="color-gray">{{ item.payDate }}</span></p>
                        </el-col>

                        <el-col :span="8">
                            <p>会员等级：<span class="color-gray">{{ item.memberLevel }}</span></p>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <p>提交时间：<span class="color-gray">{{ item.createTime }}</span></p>
                        </el-col>

                        <el-col :span="8">
                            <p>有效期：<span class="color-gray">{{ item.validityPeriodEndTime }}</span></p>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <p>
                                缴费凭证：
                                <span class="list-sty">
                                    <DownLink :file-list="getFiles(item) " />
                                </span>
                            </p>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="2"
                        class="!flex !flex-col !items-end"
                >
                    <el-tag :type="getType(item.status)"
                            class="mb-15"
                    >
                        {{ item.statusName }}
                    </el-tag>

                    <ElButton v-if="item.status === 2 && item.invoicingFlag === 0"
                              type="primary"
                              @click="doApply(item.id)"
                    >
                        申请开票
                    </ElButton>

                    <el-tag v-else
                            :type="getType(item.invoicingFlag)"
                    >
                        {{ getInvoicing(item.invoicingFlag) }}
                    </el-tag>
                </el-col>
            </el-row>
        </div>
    </div>

    <el-pagination v-model:current-page="pages.page"
                   v-model:page-size="pages.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   size="small"
                   background
                   mt-20
                   flex
                   justify-end
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />

    <el-dialog v-model="show"
               title="开票信息"
               width="600"
               center
    >
        <div class="px-20 pb-30">
            <p>公司名称：{{ invoice?.invoiceTitle }}</p>

            <p>纳税人识别号：{{ invoice?.taxNo }}</p>

            <p>地址：{{ invoice?.registerAddr }}</p>

            <p>联系电话：{{ invoice?.registerPhone }}</p>

            <p>开户行：{{ invoice?.bankName }}</p>

            <p>账号 ：{{ invoice?.bankAccount }}</p>

            <p class="mt-20">
                本次申请开票金额：{{ invoice?.invoicingAmount }}元
            </p>
        </div>

        <template #footer>
            <ElButton type="primary"
                      @click="doConfirm"
            >
                确认
            </ElButton>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.box {
    height: 50vh;
    overflow: auto;

    .item {
        border: 1px solid #eaebef;
        border-radius: 4px;
        padding: 15px 20px;
        margin-bottom: 20px;
        background: #fff;

        .list-sty {
            :deep(a) {
                margin-right: 10px;
            }
        }
    }
}
</style>
